<template>
  <el-header
    class="layout-header"
    style="height: 148px; padding: 0; background-color: #fff"
  >
    <el-row
      style="
        height: 105px;
        display: flex;
        align-items: center;
        position: relative;
      "
      class="head-bg content"
    >
      <el-col :span="12" style="display: flex; align-items: center">
        <!-- <svg-icon style="margin-right:5px;font-size:235px;margin-top: 5px" icon-class="logo1" /> -->
        <!-- <img src="../../assets/logo.png"  alt srcset /> -->
        <img
          :src="
            $itsoftUI.config.fileImgUrl + 'sysres/images/systemlogo/logo.png'
          "
          alt
          srcset
        />
        <div
          style="
            color: #333333;
            font-size: 18px;
            margin-top: -1px;
            margin-left: 5px;
            font-weight: bold;
          "
        >
          个人中心
        </div>
      </el-col>

      <el-col :span="12" style="text-align: right; margin-right: 30px">
        <!-- <el-input
          style="width:350px;border: 2px solid #F34C15;border-radius: 3px;"
          @change="handleSearchValue"
          v-model="input"
          placeholder="全站搜索"
          size="small"
        >
        
          <el-button
            style="background:#F34C15;
            
            color: #fff;height: 36px;
             line-height: 12px;"
            slot="append"
          >搜索</el-button>
        </el-input>-->
      </el-col>
      <li
        style="
          padding: 0 5px;
          height: 50px;
          position: absolute;
          right: 25px;
          top: 7px;
        "
      >
        <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          @command="userInfoHandleCommand"
          trigger="click"
        >
          <div class="avatar-wrapper" style="display: flex; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/image/avatar.png"
              class="user-avatar"
            />
            <div class="user-name" style="font-size: 13px; margin-right: 5px">
              {{ this.userInfo.name }}
            </div>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 200px">
            <div class="userinfo">
              <span style="float: left">{{ this.userInfo.schoolName }}</span>
              <span style="float: right">{{ this.userInfo.schoolCode }}</span>
            </div>
            <div class="userinfo">
              <span style="float: left">{{ this.userInfo.name }}</span>
              <span style="float: right">{{ this.userInfo.account }}</span>
            </div>

            <!-- <el-dropdown-item divided>
              <span style="font-size:13px;">个人信息</span>
            </el-dropdown-item>-->
            <el-dropdown-item>
              <!-- <span style="font-size:13px;">安全设置</span> -->
              <el-link
                :underline="false"
                :href="$itsoftUI.config.systemUrl + 'account/platform?type=1'"
                style="display: inline-block; width: 100%"
                >安全设置</el-link
              >
            </el-dropdown-item>
            <!-- target="_blank" -->
            <!-- <el-dropdown-item>
              <span style="font-size:13px;">访问记录</span>
            </el-dropdown-item>-->
            <el-dropdown-item command="logout" divided style="padding: 0 20px">
              <span style="font-size: 13px">
                <svg-icon
                  slot="prefix"
                  icon-class="tuichu"
                  style="font-size: 16px; margin-right: 5px"
                />安全退出
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </el-row>
    <el-row
      style="
        height: 42px;
        line-height: 42px;
        background-color: #f34c15;
        color: blue;
        display: flex;
        align-items: center;
      "
      :class="flag ? 'fixedBar' : ''"
      ref="scrollBox"
    >
      <el-col class="content">
        <transition name="el-fade-in">
          <el-menu
            v-show="vShow.opened"
            :default-active="defaultActive"
            router
            class="header-nav-menu"
            mode="horizontal"
            @select="handleSelect"
            background-color="#F34C15"
            text-color="#fff"
            active-text-color="#fff"
          >
            <el-menu-item
              v-for="(item, index) in nav"
              :key="index"
              :index="item.url"
              >{{ item.name }}</el-menu-item
            >

            <!-- <el-menu
            :default-active="defaultActive"
            router
            mode="horizontal"
            @select="handleSelect"
            text-color="#494949"
            active-text-color="#ffd04b"
          >
            <el-menu-item v-for="(item,index) in nav" :key="index" :index="item.url">{{item.name}}</el-menu-item>-->
          </el-menu>
        </transition>
        <!-- <li
          class="help"
          style="width: 120px;float: left;list-style: none;cursor: pointer;text-align: center;color:#fff"
          @click="push"
        >帮助中心</li>-->
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import screenfull from "screenfull";
import { mapGetters } from "vuex";
import { SystemBaseinfoList } from "../../api/user/usercommon";
import Vue from "vue";
export default {
  name: "index",
  data() {
    return {
      openDelay: 300,
      isFullscreen: false,
      offsetTop: 100,
      userInfo: {},
      flag: false,
      input: "",
      baseinfoList: [],
      avatar: "../../image/avatar.png",
      nav: [
        { name: "首页", url: "/home" },
        { name: "事务中心", url: "/transactionCenter" },
        { name: "应用中心", url: "/applicationCenter" },
        { name: "消息中心", url: "/messageCenter" },
        // { name: "帮助中心", url: "/help" }
      ],
    };
  },
  methods: {
    getUserInfo() {
      this.$itsoftUI.getUserInfo().then((res) => {
        this.userInfo = res;
        let that = this;
        setTimeout(function () {
          that.$store.dispatch("app/togglevShow");
        }, 100);
      });
    },
    userInfoHandleCommand(command) {
      switch (command) {
        case "logout":
          this.$confirm("确定要退出系统吗?", "退出系统", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$itsoftUI.logout();
            })
            .catch(() => {});
          break;
        default:
          break;
      }
    },
    handleSearchValue(val) {
      this.$router.push({
        path: "searchValue",
        query: {
          searchVal: val,
          system: this.systemCode,
        },
      });
    },
    push() {
      window.open(this.$itsoftUI.config.systemUrl + "/help", "_blank").location;
    },
    handleSelect(key, keyPath) {
      // console.log(keyPath + "111");
      //console.log(key, keyPath);
      //this.$router.push(key);
      // window.location.href = this.$itsoftUI.config.systemUrl + "/help";
    },
    fullscreenClick() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "不支持全屏显示",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    fullscreenChange() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    fullscreenInit() {
      if (screenfull.isEnabled) {
        screenfull.on("change", this.fullscreenChange);
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off("change", this.fullscreenChange);
      }
    },
    navClick(url) {
      if (
        url.substr(0, 7).toLowerCase() == "http://" ||
        url.substr(0, 8).toLowerCase() == "https://"
      ) {
        window.location.href = url;
      } else {
        this.$router.push(url);
      }
    },

    topTab() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 获取滚动值
      if (scrollTop > this.offsetTop) {
        // 稍微提前一点触发，可以不写

        this.flag = true;
      } else {
        this.flag = false;
      }
    },
  },
  created() {
    this.getUserInfo();
    SystemBaseinfoList().then((res) => {
      this.baseinfoList = res;
    });
  },
  mounted() {
    this.fullscreenInit();
    this.$nextTick(() => {
      window.addEventListener("scroll", this.topTab);
    });
  },
  beforeDestroy() {
    this.destroy();
  },
  computed: {
    ...mapGetters(["vShow"]),

    defaultActive() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set

      if (meta.activeMenu) {
        if (meta.activeMenu.indexOf("/system/report") >= 0) {
          return "/system";
        }
        return meta.activeMenu;
      }
      if (path.indexOf("/home") >= 0) {
        return "/home";
      } else if (path.indexOf("/platform") >= 0) {
        return "/platform";
      } else if (path.indexOf("/transactionCenter") >= 0) {
        return "/transactionCenter";
      } else if (path.indexOf("/system/") >= 0) {
        return "/system";
      } else if (path.indexOf("/messageCenter") >= 0) {
        return "/messageCenter";
      } else if (path.indexOf("/applicationCenter") >= 0) {
        return "/applicationCenter";
      }
      return "";
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  width: 1440px;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  .content {
    width: 800px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1300px) {
  .content {
    width: 1000px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1440px) {
  .content {
    width: 1200px;
  }
}
.fixedBar {
  position: fixed !important;
  top: 0 !important;
  z-index: 999 !important;
  width: 100%;
}
.toptab {
  position: sticky;
  z-index: 2;
  width: 100%;
}
.help:hover {
  // color: black !important;
  background-color: #dd3a03;
}
.layout-header {
  // background-color: #1183fb;
  color: #f7f7f7;
  // line-height: 50px;
  ::v-deep .el-menu.el-menu--horizontal {
    border: none;
  }
  ::v-deep .el-input__inner {
    border: none;
  }
  ::v-deep .el-input-group__append {
    padding: 0 18px !important;
  }
}
.userinfo {
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  color: #999;

  span {
    font-size: 13px;
  }
}

.header-nav-menu {
  height: 42px;
  float: left;
  margin-left: 10px;

  .el-menu-item {
    height: 42px;
    line-height: 42px;
    padding: 0 35px;
  }

  .el-menu-item.is-active {
    border-bottom: 0px solid #409eff;
    background-color: #dd3a03 !important;
  }
}
.head-bg {
  background: url("../../assets/headbg.png") no-repeat center center;
}

// .header-logo-system {
//   float: left;
//   height: 50px;
//   width: 272px;
//   border-right: 1px solid #000;

//   .header-logo {
//     float: left;
//     height: 50px;
//     padding: 0 3px 0 15px;
//     /*border-right: 1px solid #000;*/
//     width: 33px;
//     background: url("../../assets/image/logo.png") no-repeat center center;
//   }
//   .header-title {
//     font-weight: bold;
//     font-size: 18px;
//     padding: 0;
//     float: left;
//     height: 50px;
//     line-height: 50px;

//     i {
//       font-size: 12px;
//       color: #ccc;
//       padding-left: 5px;
//     }
//   }

//   .header-system {
//     float: left;
//     cursor: pointer;
//     position: relative;
//     .el-icon-caret-bottom {
//       position: absolute;
//       right: 5px;
//       top: 18px;
//       font-size: 12px;
//     }

//     .header-system-title {
//       margin-top: 15px;
//       height: 23px;
//       font-weight: bold;
//       width: 100px;
//       text-align: center;
//     }

//     .el-dropdown {
//       padding: 0 10px 0 10px;
//       color: #f7f7f7;
//       font-size: 14px;
//     }
//   }
// }
</style>
